
<script>
export default {
  data() {
    return {
      title: '提示',
      visible: false,
      message: '确定执行操作',
      showConfirmButton: true,
      showCancelButton: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      confirmButtonClass: '',
      cancelButtonClass: '',
      confirmButtonHighlight: false,
      cancelButtonHighlight: false,
      showIcon: false,
      renderContent: null,
    }
  },

  methods: {
    handleAction(type) {
      this.callback(this, type)
    },
    getRenderContent() {
      if (this.renderContent) return this.renderContent()
      if (this.message) {
        return <div class="msgbox-message" domPropsInnerHTML={this.message} />
      }
    },
  },
  computed: {
    confirmButtonClasses() {
      let classes = 'msgbox-btn msgbox-confirm ' + this.confirmButtonClass
      if (this.confirmButtonHighlight) {
        classes += ' msgbox-confirm-highlight'
      }
      return classes
    },
    cancelButtonClasses() {
      let classes = 'msgbox-btn msgbox-cancel ' + this.cancelButtonClass
      if (this.cancelButtonHighlight) {
        classes += ' msgbox-cancel-highlight'
      }
      return classes
    },
  },
  render() {
    return (
      <modal visible={this.visible}>
        <div class="message-box">
          {/*这里放图*/}
          <div v-show={this.showIcon} class="msgbox-img">
            <img src="http://placehold.it/51x51" />
          </div>
          {/* 标题 */}
          <div class="msgbox-header">
            <div class="msgbox-title">{this.title}</div>
          </div>
          {/*内容区域*/}
          <div class="msgbox-content">{this.getRenderContent()}</div>
          {/*按钮*/}
          <div class="msgbox-btns">
            <button
              class={this.cancelButtonClasses}
              v-show={this.showCancelButton}
              on-click={() => this.handleAction('cancel')}>
              {this.cancelButtonText}
            </button>
            <button
              class={this.confirmButtonClasses}
              v-show={this.showConfirmButton}
              on-click={() => this.handleAction('confirm')}>
              {this.confirmButtonText}
            </button>
          </div>
        </div>
      </modal>
    )
  },
}
</script>
<style lang="stylus">

.message-box
  position fixed
  top 50%
  left 50%
  transform translate3d(-50%, -50%, 0)
  background-color #fff
  width 85%
  border-radius 3px
  font-size 16px
  -webkit-user-select none
  overflow hidden
  backface-visibility hidden

  .msgbox-header
    text-align center
    padding-left 0
    margin-bottom 0
    font-size 16px
    font-weight 700
    color #000
    padding-top 10px

    .msgbox-title
      text-align center
      padding-left 0
      margin-bottom 0
      font-size 16px
      font-weight 700
      color #333

  .msgbox-content
    padding 10px 20px 15px
    border-bottom 1px solid #ddd
    min-height 36px
    position relative

    .msgbox-message
      color #999
      margin 0
      text-align center
      line-height 36px

  .msgbox-img
    display flex
    align-content center
    justify-content center
    padding-top 10px

    img
      width 51px
      height 51px

  .msgbox-btns
    display -webkit-box
    display -ms-flexbox
    display flex
    height 40px
    line-height 40px

  .msgbox-btn
    line-height 35px
    display block
    background-color #fff
    -webkit-box-flex 1
    -ms-flex 1
    flex 1
    margin 0
    border 0

  .msgbox-btn:focus
    outline none

  .msgbox-btn:active
    background-color #fff

  .msgbox-cancel
    width 50%
    border-right 1px solid #ddd

  .msgbox-cancel:active
    color #000

  .msgbox-confirm
    color #26a2ff
    width 50%

  .msgbox-confirm:active
    color #26a2ff
</style>
